<template>
  <Card 
    :hover="true" 
    class="cursor-pointer"
    @click="handleClick"
  >
    <!-- 题目头部 -->
    <div class="flex items-start justify-between mb-4">
      <div class="flex items-center space-x-3">
        <!-- 状态图标 -->
        <div v-if="question.user_status?.status === 'solved'" 
             class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center"
             title="已解决">
          <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
        </div>
        <div v-else-if="question.user_status?.status === 'attempted'" 
             class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center"
             title="已尝试">
          <svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div v-else 
             class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center"
             title="未尝试">
          <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        
        <div>
          <h3 class="text-lg font-semibold text-gray-900">{{ questionNumber }}. {{ question.title }}</h3>
          <p class="text-sm text-gray-700">通过率 {{ (question.acceptance_rate * 100).toFixed(2) }}%</p>
        </div>
      </div>
      
      <!-- 收藏按钮 -->
      <button 
        class="text-sm text-gray-400 hover:text-yellow-500 transition-colors duration-200"
        @click.stop="toggleFavorite"
      >
        <svg class="h-6 w-6" viewBox="0 0 24 24">
          <path 
            stroke-linecap="round" 
            stroke-linejoin="round" 
            stroke-width="2" 
            :fill="question.is_favorited ? 'currentColor' : 'none'"
            :stroke="question.is_favorited ? 'none' : 'currentColor'"
            :class="question.is_favorited ? 'text-yellow-500' : ''"
            d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
          ></path>
        </svg>
      </button>
    </div>
    
    <!-- 难度标签 -->
    <div class="mb-4">
      <Badge 
        :variant="getDifficultyVariant(question.difficulty)"
        size="md"
      >
        {{ getDifficultyLabel(question.difficulty) }}
      </Badge>
    </div>
    
    <!-- 标签 -->
    <div class="mb-4">
      <div class="flex flex-wrap gap-2">
        <Badge 
          v-for="tag in (question.tags || []).slice(0, 3)"
          :key="tag.id"
          variant="info"
          size="sm"
        >
          {{ getChineseTagName(tag) }}
        </Badge>
        <Badge 
          v-if="question.tags && question.tags.length > 3"
          variant="default"
          size="sm"
        >
          +{{ question.tags.length - 3 }}
        </Badge>
      </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="flex justify-end">
      <Button 
        variant="primary"
        size="sm"
        @click.stop="handleClick"
      >
        开始做题
      </Button>
    </div>
  </Card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import Card from '@/components/ui/Card.vue'
import Button from '@/components/ui/Button.vue'
import Badge from '@/components/ui/Badge.vue'
import { getChineseTagName } from '@/utils'
import type { Question, Difficulty } from '@/types'

interface Props {
  question: Question
  index: number
  currentPage: number
  pageSize: number
}

const props = defineProps<Props>()

const emit = defineEmits<{
  favorite: [questionId: number]
  unfavorite: [questionId: number]
}>()

const router = useRouter()

const questionNumber = computed(() => {
  return (props.currentPage - 1) * props.pageSize + props.index + 1
})

const getDifficultyLabel = (difficulty: Difficulty) => {
  const labels = {
    'Easy': '简单',
    'Medium': '中等', 
    'Hard': '困难'
  }
  return labels[difficulty] || difficulty
}

const getDifficultyVariant = (difficulty: Difficulty) => {
  const variants = {
    'Easy': 'success',
    'Medium': 'warning', 
    'Hard': 'danger'
  } as const
  return variants[difficulty] || 'default'
}

const handleClick = () => {
  router.push(`/questions/${props.question.id}`)
}

const toggleFavorite = () => {
  if (props.question.is_favorited) {
    emit('unfavorite', props.question.id)
  } else {
    emit('favorite', props.question.id)
  }
}
</script>
